<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>收货设置</title>
	<meta name="decorator" content="default"/>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){
					if($(".timeslot:visible").length==0){
						showJBoxMess("请添加收货时间.","error");
						return;
					}
					$("input[id='usual'][type='checkbox']").each(function(){
						if(!$(this).is(":checked")){
							$(this).parent().append("<input type=\"hidden\" id=\"usual\" name=\""+$(this).attr("name")+"\" value=\"0\" />");
						}
					});
					$("input[id='weekend'][type='checkbox']").each(function(){
						if(!$(this).is(":checked")){
							$(this).parent().append("<input type=\"hidden\" id=\"weekend\" name=\""+$(this).attr("name")+"\" value=\"0\" />");
						}
					});
					$("input[id='afterSixteen'][type='checkbox']").each(function(){
						if(!$(this).is(":checked")){
							$(this).parent().append("<input type=\"hidden\" id=\"afterSixteen\" name=\""+$(this).attr("name")+"\" value=\"0\" />");
						}
					});
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if(element.attr("name")=="timeSlot"){
						error.appendTo(element.parent());
					}else if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
		});
		
		function delTime(obj, index){
			top.$.jBox.confirm("确认要删除该时间段吗",'系统提示',function(v,h,f){
				if(v=='ok'){
					$("#delFlag:eq("+index+")").val("1");
					$("input[id='delFlag']:eq("+index+")").val("1");
					$(obj).parent().parent().hide();
					//删除后，重置排序号
					$("input[id='sort']").each(function(i){
						$(this).val(i);
					});
				}
			},{buttonsFocus:1});
		}
		
		function addTime(){
			var num = $(".timeslot").length;
			var html = "<tr class=\"timeslot\"><td>";
				html += "<input type=\"hidden\" id=\"timeId\" name=\"timeSlots["+num+"].id\" value=\"\"/>";
				html += "<input id=\"timeText"+num+"\" name=\"timeSlots["+num+"].timeText\" type=\"text\" class=\"required\"";
				html += "value=\"\"/>";
				html += "<input type=\"hidden\" id=\"delFlag\" name=\"timeSlots["+num+"].delFlag\" value=\"0\" />";
				html += "<input id=\"sort\" name=\"timeSlots["+num+"].sort\" type=\"hidden\" value=\""+(num+1)+"\" />";
				html += "</td>";
				html += "<td style=\"text-align:center; vertical-align: middle;\"><input type=\"checkbox\" id=\"usual\" name=\"timeSlots["+num+"].usual\" value=\"1\"/></td>";
				html += "<td style=\"text-align:center; vertical-align: middle;\"><input type=\"checkbox\" id=\"weekend\" name=\"timeSlots["+num+"].weekend\" value=\"1\"/></td>";
				html += "<td style=\"text-align:center; vertical-align: middle;\"><input type=\"checkbox\" id=\"afterSixteen\" name=\"timeSlots["+num+"].afterSixteen\" value=\"1\"/></td>";
				html += "<td></td>";
				html += "<td style=\"text-align:center; vertical-align: middle;\">";
				html += " <a href=\"javascript:\" id=\"arrow-up\" onclick=\"arrowUpTr(this)\"><i class=\"icon-arrow-up\"></i>上移</a>";
				html += " <a href=\"javascript:\" id=\"arrow-down\" onclick=\"arrowDownTr(this)\"><i class=\"icon-arrow-down\"></i>下移</a>";
				html += "</td>";
				html += "<td style=\"text-align:center; vertical-align: middle;\">";
				html += " <input id=\"btnDel\" class=\"btn\" type=\"button\" value=\"删除\" onclick=\"delTime(this, "+num+")\"/>";
				html += "</td></tr>";
			$(".timeslots").append(html);
			//新增后，重置排序号
			$("input[id='sort']").each(function(i){
				$(this).val(i);
			});
		}
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/ivm/product/receipttime/form?id=${receiptTime.id}">收货设置</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="receiptTime" action="${ctx}/ivm/product/receipttime/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<form:hidden path="merchant.id"/>
		<tags:message content="${message}"/>
		<!-- <div class="control-group">
			<label class="control-label"><span class="color-red font-size20">*</span>收货设置:</label>
			<div class="controls">
				<label>最早可选收货时间为</label>
				<input name="timeSlot" type="text" value="${receiptTime.timeSlot==0?1:receiptTime.timeSlot}" style="width:50px;margin:0;padding:0;text-align:center;" class="required digits">
				<label>小时后的下一个时间段</label>
			</div>
		</div> -->
		<div class="control-group">
			<label class="control-label"><span class="color-red font-size20">*</span>收货时间设置:</label>
			<div class="controls">
				<input id="btnAdd" class="btn" type="button" value="添加" onclick="addTime()"/>
				<table id="contentTable" class="table table-striped table-bordered table-condensed" style="margin-top: 10px; margin-bottom: 0px; width: auto;">
					<thead>
						<tr>
							<th rowspan="2" style="text-align:center; vertical-align: middle;">可选收货时间</th>
							<th colspan="3" style="text-align:center;">订单时间</th>
							<th rowspan="2" style="text-align:center; vertical-align: middle;">配送区域</th>
							<th rowspan="2" style="text-align:center; vertical-align: middle;">排序</th>
							<th rowspan="2" style="text-align:center; vertical-align: middle;">操作</th>
						</tr>
						<tr>
							<th width="80" style="text-align:center;">平时</th>
							<th width="80" style="text-align:center;">周末</th>
							<th width="80" style="text-align:center;">16点后订单</th>
						</tr>
					</thead>
					<tbody class="timeslots">
						<c:if test="${fn:length(receiptTime.timeSlots)>0}">
						<c:forEach items="${receiptTime.timeSlots}" var="time" varStatus="vs">
						<tr class="timeslot">
							<td>
								<input type="hidden" id="timeId" name="timeSlots[${vs.index }].id" value="${time.id }"/>
								<input id="timeText${vs.index }" name="timeSlots[${vs.index }].timeText" type="text" class="required"
									value="${time.timeText }"/>
								<input type="hidden" id="delFlag" name="timeSlots[${vs.index }].delFlag" value="${time.delFlag }" />
								<input type="hidden" id="sort" name="timeSlots[${vs.index }].sort" value="${time.sort }" />
							</td>
							<td style="text-align:center; vertical-align: middle;"><input type="checkbox" id="usual" name="timeSlots[${vs.index }].usual" <c:if test="${time.usual==1 }">checked="checked"</c:if> value="1"/></td>
							<td style="text-align:center; vertical-align: middle;"><input type="checkbox" id="weekend" name="timeSlots[${vs.index }].weekend" <c:if test="${time.weekend==1 }">checked="checked"</c:if> value="1"/></td>
							<td style="text-align:center; vertical-align: middle;"><input type="checkbox" id="afterSixteen" name="timeSlots[${vs.index }].afterSixteen" <c:if test="${time.afterSixteen==1 }">checked="checked"</c:if> value="1"/></td>
							<td>
								<form:select path="timeSlots[${vs.index}].areaIdList">
									<form:options items="${fns:getDictList('city_area')}" itemLabel="label" itemValue="id" htmlEscape="false"/>
								</form:select>
							</td>
							<td style="text-align:center; vertical-align: middle;">
								<a href="javascript:" id="arrow-up" onclick="arrowUpTr(this)"><i class="icon-arrow-up"></i>上移</a>
								<a href="javascript:" id="arrow-down" onclick="arrowDownTr(this)"><i class="icon-arrow-down"></i>下移</a>
							</td>
							<td style="text-align:center; vertical-align: middle;">
								<input id="btnDel" class="btn" type="button" value="删除" onclick="delTime(this, ${vs.index })"/>
							</td>
						</tr>
						</c:forEach>
						</c:if>
					</tbody>
				</table>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">收货提示:</label>
			<div class="controls">
				<form:textarea path="remarks" htmlEscape="false" rows="4" maxlength="200" class="input-xxlarge"/>
				<br/><span style="color: red;">(提示：如需换行请输入&lt;br/&gt;)</span>
			</div>
		</div>
		<div class="form-actions">
			<shiro:hasPermission name="ivm:product:receipttime:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>
